<script setup lang="ts">
import { defineComponent, onMounted } from 'vue'
import 'mars3d-cesium/Build/Cesium/Widgets/widgets.css'
import 'mars3d/dist/mars3d.css'
import type { MapEmitType, MapStateType, MMapProps } from './types.ts'
import { initMMap } from './composition/initMMap.ts'
import { addToolButtons } from './composition/addToolButtons.ts'
import { addOfflineLayer } from './composition/offlineLayer.ts'
export type { MapEmitType, MapStateType }
const emit = defineEmits<MapEmitType>()
const props = withDefaults(defineProps<MMapProps>(), {
  elementId: 'mars3dContainer',
  toolButtons:{
    layer: true,
    line: true,
    question: true,
  } as any,
})
const MapState: MapStateType = {
  instance: undefined,
  staticServerIP: 'http://192.168.1.31:9004',
}
onMounted(() => {
  initMMap({ emit, props, MapState })
  // 工具按钮
  addToolButtons(MapState.instance, { props, emit })
  // 离线地图
  addOfflineLayer(MapState)
})
defineComponent({
  name: 'MMap',
})
</script>

<template>
  <div class="MMap" :id="props.elementId"></div>
</template>

<style lang="scss" src="./styles/ToolButtons.scss"></style>
<style scoped lang="scss">
.MMap {
  width: 100%;
  height: 100%;
}
</style>
